<template>
	<view class="bg-white">
		<view class="flex solid-bottom padding justify-between">
			<text class="uni-bold">当前委托</text>
			<view  class="text-blueL" v-if="openStatus==3" @click="cancelAll()">一键撤单</view>
		</view>
		<view v-if="martinOrderList!=null&&martinOrderList.length!=0">
			<view class="item uni-divider" v-for="(item,index) in forMartMartinOrder" :key="index">
				<view class="opt">
					<view class="uni-h4 uni-bold uni-up buy" style="color: #00B48E" v-if="item.direction == 'BUY_LONG'">买入开多10X</view>
					<view class="uni-h4 uni-bold uni-down sell" style="color: #D14B64" v-if="item.direction == 'BUY_SHORT'">买入开空10X</view>
					<view class="uni-h4 uni-bold uni-down sell" style="color: #D14B64" v-if="item.direction == 'SELL_LONG'">卖出平多10X</view>
					<view class="uni-h4 uni-bold uni-up buy" style="color: #00B48E" v-if="item.direction == 'SELL_SHORT'">卖出平空10X</view>
					<view class="uni-h6 uni-text-gray uni-common-pl">{{item.formartDate}}</view>
					<button class="detail" @click="detailFloor(item)">详 情</button>
					<button class="cancel" @click="cancelFloor(item)">撤 消</button>
				</view>
				<view class="tbody">
					<view class="ttr">
						<view class="td">
							<view class="tname">合约张数</view>
							<view class="tval">{{item.mount}}</view>
							<view class="tunit">张</view>
						</view>
						<view class="td">
							<view class="tname">成交均价</view>
							<view class="tval">{{item.floorAvgPrice}}</view>
							<view class="tunit">usdt</view>
						</view>
					</view>
					<view class="ttr">
						<view class="td">
							<view class="tname">成交量</view>
							<view class="tval">{{item.dealContractMount}}</view>
							<view class="tunit">张</view>
						</view>
						<view class="td">
							<view class="tname">成交量比</view>
							<view class="tval">{{item.dealMountRate}}</view>
							<view class="tunit">%</view>
						</view>
					</view>
					<view class="ttr">
						<view class="td">
							<view class="tname">总挂单</view>
							<view class="tval">{{item.orderNum}}</view>
							<view class="tunit"></view>
						</view>
						<view class="td">
							<view class="tname">成交单比</view>
							<view class="tval">{{item.dealOrderRate}}</view>
							<view class="tunit">%</view>
						</view>
					</view>
					<view class="ttr">
						<view class="td">
							<view class="tname">订单状态</view>
							<view class="tval"></view>
							<view class="tunit" v-if="item.state=='zero_deal'">未成交</view>
							<view class="tunit" v-else-if="item.state=='part_deal'">部分成交</view>
							<view class="tunit" v-else-if="item.state=='over_deal'">完全成交</view>
							<view class="tunit" v-else-if="item.state=='part_cancle'">部分撤销</view>
							<view class="tunit" v-else-if="item.state=='over_cancle'">完全撤销</view>
						</view>
						<view class="td">
							<view class="tname">异常单</view>
							<view class="tval">{{item.errorOrderNum}}</view>
							<view class="tunit">个</view>
						</view>
					</view>
					<view class="ttr" v-if="item.direction=='BUY_LONG'||item.direction=='BUY_SHORT'">
						<view class="td">
							<view class="tname">爆仓价</view>
							<view class="tval">{{item.liquiPrice}}</view>
							<view class="tunit">usdt</view>
						</view>
						<view class="td">
							<view class="tname">保证金</view>
							<view class="tval">{{item.margin}}</view>
							<view class="tunit"></view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view v-else class="padding-xl text-center">
			暂无委托
		</view>
	</view>

</template>

<script>
	export default {
		props: {
			type: {
				type: Number,
				default: 1
			},
			strategy: 0
		},
		data() {
			return {
				openStatus: this.type,
				martinOrderList: [],
			}
		},
		watch: {
			type(val) {
				this.openStatus = val
			}
		},
		mounted() {
			this.fresh()
			uni.$on("orderFresh", this.fresh)
		},
		computed: {
			forMartMartinOrder: function() {
				if (typeof(this.martinOrderList) != "undefined") {
					console.log("forMartMartinOrder" + this)
					for (let s of this.martinOrderList) {
						s.formartDate = this.t2d(s.createDate)
						s.dealMountRate = Number(s.dealContractMount * 100 / s.mount).toFixed(2)
						s.dealOrderRate = Number(s.dealOrderNum * 100 / s.orderNum).toFixed(2)
					}
				}
				return this.martinOrderList
			}
		},
		methods: {
			cancelAll() {
				var _self = this
				uni.showModal({
					"title": "风险提示",
					"content": "将撤销当前合约全部挂单?",
					complete(e) {
						if (e.confirm) {
							console.log("try to cancel all")
							uni.request({
								url: _self.api + '/futures/orders/cancel?instrumentId=' + _self.getDefaultContract().instrument_id,
								method: 'POST',
								header: {
									"Authorization": "Bearer " + _self.getToken()
								},
								data: {},
								success: res => {
									console.log('getMartinOrders Resps:')
									console.log(res.data.data)
									_self.getMartinOrders();
								}
							});
						}
					}
				})
			},
			t2d(value) { //04-03 10:53
				var datetime = new Date();
				datetime.setTime(value * 1000)

				var month = datetime.getMonth() + 1 < 10 ? "0" + (datetime.getMonth() + 1) : datetime.getMonth() + 1;
				var date = datetime.getDate() < 10 ? "0" + datetime.getDate() : datetime.getDate();
				var hour = datetime.getHours() < 10 ? "0" + datetime.getHours() : datetime.getHours();
				var minute = datetime.getMinutes() < 10 ? "0" + datetime.getMinutes() : datetime.getMinutes();
				var second = datetime.getSeconds() < 10 ? "0" + datetime.getSeconds() : datetime.getSeconds();
				var result = month + '-' + date + ' ' + hour + ":" + minute
				return result
			},
			detailFloor(floor) {
				uni.navigateTo({
					url: "detail?floorId=" + floor.id + "&instrumentId=" + this.getDefaultContract().instrument_id +
						"&futureCategory=" + floor.floorCategory
				})
			},
			addTrigger(floorId) {
				uni.showToast({
					title: "加紧开发中"
				})
			},
			cancelFloor(floor) {
				uni.showLoading({
					title: '加载中'
				})
				uni.request({
					url: this.api + '/futures/orders/cancel/' + floor.id + '?floorCategory=' + floor.floorCategory,
					method: 'POST',
					header: {
						"Authorization": "Bearer " + this.getToken()
					},
					success: res => {
						console.log("cancelFloor Rsps")
						console.log(res.data.data)
						this.getMartinOrders()
					},
					complete() {
						uni.hideLoading()
					}
				});
			},
			getMartinOrders() {
				console.log("query strategy floor " + this.strategy)
				let futrueCategory = ''
				if (this.strategy == 1) {
					futrueCategory = 'future_pagoda_martin'
				} else if (this.strategy == 2) {
					futrueCategory = 'future_blood_martin'
				} else if (this.strategy == 3) {
					futrueCategory = 'future_split_martin'
				} else if (this.strategy == 4) {
					futrueCategory = 'future_dagger_martin_use_margin'
				} else if (this.strategy == 5) {
					futrueCategory = 'future_dagger_martin_no_margin'
				} else {
					futrueCategory = 'future_single_martin'
				}

				uni.request({
					url: this.api + '/futures/orders/list?instrumentId=' + this.getDefaultContract().instrument_id +
						'&isNotOver=true&futrueCategory=' + futrueCategory,
					method: 'GET',
					header: {
						"Authorization": "Bearer " + this.getToken()
					},
					data: {},
					success: res => {
						console.log('getMartinOrders Resps:')
						console.log(res.data.data)
						this.martinOrderList = res.data.data
					}
				});
			},

			fresh: function() {
				this.getMartinOrders()
			}

		}
	}
</script>

<style scoped>
	.order .title {
		padding: 0 20upx 20upx 20upx;
	}

	.order .item {
		padding: 20upx 20upx 20upx 20upx;
	}

	.order .item .opt {
		position: relative;
		display: flex;
		align-items: baseline;
	}


	 .cancel {
		position: absolute;
		top: 0;
		right: 0;
		width: 80upx;
		height: 50upx;
		line-height: 50upx;
		font-size: 24upx;
		padding: 0;
		/* background-color: #CBCBC9; */
	}

	.detail {
		position: absolute;
		top: 0;
		right: 100upx;
		width: 80upx;
		height: 50upx;
		line-height: 50upx;
		font-size: 24upx;
		padding: 0;
		background-color: #3B81F7;
		color: #FFFFFF;
	}	


	.trigger {
		position: absolute;
		top: 0;
		right: 200upx;
		width: 80upx;
		height: 50upx;
		line-height: 50upx;
		font-size: 24upx;
		padding: 0;
		background-color: #3B81F7;
		color: #FFFFFF;
	}

	.order .item .thead {
		display: flex;
		color: #8e9fa7;
	}

	.order .item .price {
		width: 35%;
	}

	.order .item .num {
		width: 35%;
	}

	.order .item .turnover {
		width: 30%;
		text-align: right;
	}

	.tbody {
		display: flex;
		flex-direction: column;
	}

	.td view {
		font-size: 24upx;
		flex: 1;
	}

	.td .tunit {
		text-align: left;
	}

	.tname {
		color: #848484;
		width: 30%;
	}

	.tunit {
		color: #848484;
	}

	.buy {
		color: #00B48E;
	}

	.sell {
		color: #D14B64;
	}

	.ttr {
		display: flex;
		flex-direction: row;
		flex: 1;
	}

	.ttr .td {
		flex: 1;
		display: flex;
		flex-direction: row;
	}
</style>
